<template>
  <div>
    <div class="header">
      <div class="spot">
        <div class="left">
          <img :src="$store.state.commons.spot.imgurl" v-if="$store.state.commons.spot.imgurl" alt />
        </div>
        <div class="right">
          <div class="title">
            <span style="float:left;">{{$store.state.commons.spot.title}}</span>
            <span
              class="type"
              v-if="$store.state.commons.spot.grade"
            >{{$store.state.commons.spot.grade}}景区</span>
          </div>
          <div class="address">
            <span class="black">地址:</span>
            <span class="gray">{{$store.state.commons.spot.address}}</span>
          </div>
          <div class="opentime line">
            <span class="black">开放时间：</span>
            <span class="gray">{{sub.intro.opentime}}</span>
          </div>
          <div class="visible line">
            <span class="black">建议时间：</span>
            <span class="gray">{{sub.intro.visittime}}</span>
          </div>
          <div class="service line">
            <span class="black">服务保障 ：</span>
            <span class="gray">
              <div class="green">如实描述</div>
              <div class="green">入园保障</div>
            </span>
          </div>
          <div class="best">
            <span class="black">精彩点评：</span>
            {{sub.best_comment}}
          </div>
          <div class="price">
            ￥
            <span class="large">{{$store.state.commons.spot.price_min}}</span>
            起&emsp;
            <div class="si">
              票面价:
              <span>￥{{$store.state.commons.spot.price_min*2+10}}</span>&emsp;五折起
            </div>
          </div>
        </div>
        <div style="clear:both;"></div>
      </div>
    </div>
    <div class="mybody">
      <h4 class="title">景点简介</h4>
      <div>
        <div v-for="(aitem,index) in $store.state.commons.result" :key="index">
          <h1 v-if="aitem.title">{{aitem.title}}</h1>
          <div class="p" v-if="aitem.referral">{{aitem.referral}}</div>
          <div class="img">
            <img :src="aitem.img" alt />
          </div>
        </div>
      </div>

      <h4 class="title" v-if="this.$store.state.commons.comments">游客点评</h4>
      <div class="comments">
        <comment v-for="(item,index) in comments" :key="index" :commentObj="item" :ind="index+1"></comment>
      </div>
      <h4 class="title">相关推荐</h4>
      <div class="spots">
        <spotbox
          v-for="(item,index) in $store.state.commons.tuijian_spots"
          @top="refresh()"
          :issceny="true"
          :key="index"
          :it="item"
        ></spotbox>
      </div>
      <h4 class="title">相关攻略文章</h4>
      <div id="yjDomBox">
        <ul class="yjList">
          <li class="clearfix" v-for="(item,index) in $store.state.commons.spot_list" :key="index">
            <div class="yjListLeft">
              <img
                data-id="1121673"
                :src="item.article.headerimgurl"
                data-original-background="none"
                style="background: none;"
              />
              <!-- <span class="jingpin">精品</span> -->
            </div>
            <div class="yjListRight">
              <p
                @click="handleArtcile(item,index)"
                class="yjTitle"
                data-id="1121673"
              >{{item.article.title}}</p>
              <p
                @click="handleArtcile(item,index)"
                class="yjInfo"
                data-id="1121673"
              >{{item.article.intro}}...</p>
              <div class="yjBottom clearfix">
                <a
                  class="leftUserBox"
                  href="/travels/member/person.html?uid=cca485003bdf3cb0227d6e364aada8a2"
                  target="_blank"
                >
                  <span class="leftUserPic">
                    <img :src="'http://localhost:8010/getImage?name='+item.user.avataurl" />
                  </span>
                  <span class="leftUserName">{{item.user.nickname}}</span>
                </a>
                <div class="leftNub">
                  <span class="viewNub">{{item.article.seetimes}}</span>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="comment">
        <div class="m">你的满意度：</div>
        <el-rate class="rate m" v-model="value" show-text></el-rate>
        <div class="m">你的评论：</div>
        <el-input size="large" type="textarea" v-model="commenttext" :rows="7" class="input"></el-input>
        <div class="m">分享图片：</div>
        <el-upload
          action="http://localhost:8010/eleupload"
          list-type="picture-card"
          :limit="14"
          :on-success="handCollection"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-button type="primary" style="float:right;margin-right:0px" @click="submit">提交点评</el-button>
        <div style="clear:both;"></div>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import comment from "@/components/spot/comment";
import spotbox from "@/components/spot/spotbox";
export default {
  components: { comment, spotbox },
  mounted() {
    let sid = this.$store.state.commons.spotid;
    if (sid != null) {
      this.refresh_comment(sid);
    }
    window.onNuxtReady(() => {
      document.body.scrollTop = document.documentElement.scrollTop = 0;
      if (sid == null || sid == "") {
        sid = this.$store.state.commons.spotid;
        window.console.log("sid:", sid);
        this.refresh_comment(sid);
      }
    });

    // window.console.log('123');
  },
  methods: {
    refresh_comment(id) {
      this.$axios.get("/api2/scenComment/list/" + id).then(res => {
        this.comments = res.data.list;
      });
    },
    refresh() {
      // location.reload();
    },
    handleRemove(file, fileList) {
      let name = file.response.url.split("=")[1];
      for (let index = 0; index < this.imglist.length; index++) {
        const element = this.imglist[index];
        if (element == name) {
          // delete this.imglist[index]
          this.imglist.splice(index, 1);
          break;
        }
      }
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handCollection(file) {
      this.imglist.push(file.url.split("=")[1]);
      window.console.log("imglist", this.imglist);
    },
    handleArtcile(item, index) {
      window.console.log(item);
      this.$store.commit("commons/setArticleId", item.article.id);
      this.$router.push("/strategy/page");
    },
    submit() {
      window.console.log("value", this.value);
      window.console.log("imglist", this.imglist.join(":"));
      window.console.log("commenttext", this.commenttext);
      let token = this.$store.state.user.userInfo.token;
      if (token == "") {
        this.$message.error("你还未登录哦！");
        this.$router.push("/user/login");
        return;
      }
      let sid = this.$store.state.commons.spot.sid;
      let obj = {
        sid: sid,
        dateComment: new Date(),
        content: this.commenttext,
        imgs: this.imglist.join(":"),
        rate: this.value
      };
      this.$axios.post("/api2/scenComment/submit/" + token, obj).then(res => {
        if (res.data.type == "SUCCESS") {
          location.reload();
          this.$message.success("点评成功!");
          this.refresh_comment();
        }
      });
    }
  },
  data() {
    return {
      comments: [],
      imglist: [],
      artcilelist: [],
      commenttext: "",
      value: 0,
      dialogImageUrl: "",
      dialogVisible: false,
      url:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      srcList: [
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg"
      ],
      sub: {
        best_comment:
          "景色不错，现在是淡季，油菜都变成菜籽了，人很少。观景台很好，可以看到景区全貌。打卡之地，不如宏村经典，但也不错。",
        result: [
          {
            title: "古老的徽式村落",
            referral:
              "西递村是一个古朴典雅，底蕴深厚的古村落。她既有古徽州精湛的“三雕”建筑艺术，又有浓郁内涵的人文景观，从而形成了底蕴深厚的徽州地域文化的显著持征。",
            img:
              "http://pic5.40017.cn/02/001/05/5e/rBLkCVvG2HCAd85JAAGdiikqw3E174.jpg"
          },
          {
            title: "",
            referral:
              "这个传统的古村落在很大程度上仍然保持着那些在上个世纪已经消失或改变了的乡村的面貌。其街道的风格，古建筑和装饰物，以及供水系统完备的民居都是非常独特的文化遗存。同样是徽派建筑，与别的村落相比，感觉西递的更加的别具一格。",
            img:
              "http://pic5.40017.cn/02/000/05/5e/rBLkCVvG2HGAPh0UAAIZAzXPOvk706.jpg"
          },
          {
            title: "",
            referral:
              "村落以一条纵向主道贯穿东西，和两条沿溪向南北延伸的道路为村中的主要骨架，构成特色的村落街巷系统。所有街巷均以黟县青石铺地，古建筑为木结构、砖墙维护。",
            img:
              "http://pic5.40017.cn/03/000/b7/20/rB5oQFvG2HCAVqeKAAKoyihanxo102.jpg"
          },
          {
            title: "",
            referral:
              "村中木雕、石雕、砖雕十分丰富多彩，巷道、溪流、建筑布局相宜。村落空间变化韵味有致，建筑色调朴素淡雅，体现了皖南古村落人居环境营造方面的杰出才能和成就，具有很高的历史、艺术、科学价值。",
            img:
              "http://pic5.40017.cn/02/001/05/5f/rBLkCFvG2HKAOHDkAAHKISM53oc142.jpg"
          },
          {
            title: "",
            referral:
              "西递村旁边的观景台上，还可以看到整个古镇的样子，以及大片大片的油菜花田，不得不令人再次感叹西递的美。西递名气不如宏村大，游人也少，游览起来也更舒心，漫步在这里，细细品味这徽式古村落与明清建筑艺术吧。",
            img:
              "http://pic5.40017.cn/01/000/06/45/rBLkBlvG2HGAVUJzAAIt1aKYc4U289.jpg"
          }
        ],
        intro: {
          grade: "AAAAA",
          spot: "西递",
          lng: "117.994437525",
          addr: "黄山市黟县西递村",
          lat: "29.9069426169",
          visittime: "建议2-4小时",
          type: "古镇古村世界文化遗产",
          opentime: "全天开放",
          tel: "0559-5154030",
          url: "http://www.chinaxidi.com.cn"
        }
      }
    };
  }
};
</script>

<style lang="less" scoped>
@import url(../../assets/css/home.css);
.spot {
  border: solid #ddd 1px;
  width: 980px;
  padding: 20px;
  margin: 20px auto;
  //   background: red;
  .left {
    float: left;
    height: 210px;
    img {
      margin-top: 10px;
      margin-right: 20px;
      display: block;
      width: 300px;
      border: solid 20px rgba(138, 236, 243, 0.247);
      height: 185px;
      //   transform: scale(1.4);
      object-fit: cover;
    }
  }
  .right {
    float: left;
    padding: 10px;
    width: 560px;
    height: 220px;
    position: relative;
    .line {
      margin: 10px 0;
    }
    .best {
      background: #fcf9ea;
      font-size: 14px;
      padding: 8px 4px;
    }
    .black {
      color: #666;
      font-weight: 600;
      font-size: 14px;
    }
    .gray {
      color: #999;
      font: normal;
      font-size: 14px;
    }
    .green {
      display: inline;
      color: white;
      background: #50b400;
      border-radius: 4px;
      padding: 1px 5px;
      margin-right: 5px;
      width: 80px;
    }
    .title {
      display: inline;
      font-size: 30px;
      padding: 2px 3px;
      color: rgb(16, 179, 219);
    }
    .type {
      height: 20px;
      margin-top: 10px;
      margin-left: 10px;
      float: left;
      text-align: center;
      font-size: 15px;
      padding: 2px;
      color: #ff7800;
      border: 1px solid #ff7800;
      border-radius: 4px;
    }
    .address {
      color: gray;
      position: absolute;
      bottom: 0px;
    }
    .price {
      width: 150px;
      height: 88px;
      color: #fff;
      position: absolute;
      right: -80px;
      top: 20px;
      border-top-left-radius: 100px;
      border-bottom-left-radius: 100px;
      text-align: right;
      padding-top: 20px;
      padding-right: 8px;
      background: #ff7800;
      .large {
        font-size: 35px;
        font-weight: 800;
      }
      .si {
        height: 20px;
        background: royalblue;
        font-size: 12px;
        line-height: 20px;
        margin-right: -8px;
        padding-right: 5px;
        span {
          text-decoration: line-through;
        }
      }
    }
    .look {
      position: absolute;
      width: 170px;
      height: 35px;
      background: #ff7800;
      color: white;
      font-size: 20px;
      text-align: center;
      line-height: 35px;
      top: 60px;
      right: 5px;
      &:hover {
        cursor: pointer;
        text-decoration: underline;
      }
    }
  }
}
.mybody {
  width: 1020px;
  padding-left: 20px;
  margin: 0 auto;
  .comment {
    padding: 20px 0px;
    .m {
      margin-bottom: 10px;
    }
    .rate {
      // display: inline-block;
    }
    .input {
      margin: 10px auto;
      width: 1000px;
    }
    /deep/img {
      object-fit: cover;
    }
  }
  .title {
    border-bottom: solid 10px rgb(201, 245, 201);
    font-size: 20px;
    font-weight: 100;
    width: 150px;
  }
  h1 {
    display: block;
    border-left: solid 4px green;
    padding-left: 20px;
    padding: 10px 0;
    background: rgba(92, 240, 195, 0.274);
    text-align: center;
    color: rgb(16, 219, 175);
  }
  .p {
    width: 800px;
    margin: 8px auto;
    font-size: 14px;
    color: #666;
    line-height: 24px;
  }
  .img {
    width: 800px;
    height: 475px;
    margin: 0 auto;
    img {
      width: 800px;
      height: 475px;
    }
  }
}
</style>